<template>
	<div>
		<div :id="'lineChartId_' + echartsId" class="ichart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	name: 'GovSuperviseAdminTabularData',
	props: {
		ichartName: {
			type: String,
			required: false,
		},
		echartsId: {
			type: String,
			default: '1'
		},
	},
	data() {
		return {
			myChart: '',
			dataList: [], //数据列表
			rawData:[],
			seriesName:[],
			// this.xaxisData = ["测试", "月圆", "王绵圳", "彭苇", "洪开盛","测试", "月圆", "王绵圳", "彭苇", "洪开盛"]
		};
	},
	created() {

	},
	mounted() { },
	methods: {
		getDataList(data, name) { //获取areaId
			this.dataList = data
			//x轴数据
			this.seriesName = []
			this.rawData = []
			this.dataList.series.forEach(res => {
				this.seriesName.push(res.name)
				this.rawData.push(res.data)
			})
			//y轴数据
			this.initChart()
		},
		domIsExistence(name) {
			if (name != null && name != "" && name != undefined) {
				name.dispose(); //解决echarts dom已经加载的报错
			}
		},
		// 交易数据汇总订单金额明细
		initChart() {
			this.domIsExistence(this.myChart)
			this.myChart = echarts.init(document.getElementById('lineChartId_' + this.echartsId));

			let grid = {
				//设置网格
				left: '3%',
				right: '6%',
				top: '12%',
				bottom: '10%',
				containLabel: true
			}
			let color = ['#3284FF', '#2EDD5F', '#FF4910','#F1D233', '#A980FF', '#FF9898', '#FF8181', '#01D6F3', '#FF7953','#54E8B8', '#FFA749']
			// let seriesName = [
			// 	'签约客户数',
			// 	'事业部客户数',
			// 	'市场部客户数',
			// ]
			let series = this.seriesName.map((name, sid) => {
				return {
					name,
					type: 'line',
					// stack: 'Total',
					smooth: true,
					lineStyle:{
						width:3,
					},
					data: this.rawData[sid]
				};
			});
			let legend = {
				selectedMode: true,
				icon:'rect',
				left: '3%',
				itemWidth: 20,
				itemHeight: 3,
				itemGap: 20,
				formatter: function (name) {
					return '{oneone|' + name + '}';
				},
				textStyle: {
					color: "#747474",
					rich: {
						oneone: {
							align: 'center',
							padding: [2, 0, 0, 0],
							verticalAlign: 'middle',
							fontSize: 13,
						}
					}
				}
			}
			console.log('series',series)
			let option = {
				color,
				tooltip: {
					trigger: 'axis'
				},
				legend,
				grid,
				xAxis: {
					type: 'category',
					// x轴数据文字颜色
					axisLabel: {
                        //x轴文字的配置
                        textStyle: {
                            color: "#576276",
                        },
					},
					nameGap: 7,//坐标轴名称与轴线之间的距离。
					// x轴那天坐标轴线的颜色
					axisLine: {
						show: true, //隐藏轴线
						lineStyle: {
							color: '#EEF1F7',
						}
					},
					//x轴上面刻度线隐藏
					axisTick: {
						show: true,
						lineStyle: {
							color: '#8E8E8E',
						}
					},
					// x轴上面指示线
					// axisPointer: {
					// 	show: true,
					// 	type: "line",
					// 	z: 0,
					// 	lineStyle: {
					// 		color: '#FFB6A5',
					// 		type: "dashed",
					// 		dashOffset: 0.5,
					// 		join: "round"
					// 	}
					// },
					boundaryGap: false,
					triggerEvent: true,
					data: this.dataList.xaxis
				},
				yAxis: {
					type: 'value',
					//y轴标签文字颜色
					axisLabel: {
						formatter: '{value}',
						//y轴文字的配置
						textStyle: {
                            color: "#9198A5",
                        },
					},
					// y轴分割线设置为虚线
					splitLine: {
						show: true,
						lineStyle: {
							color: "#EEF1F7",
						}
					},
					// x轴那天坐标轴线的颜色
					axisLine: {
						show: true, //隐藏轴线
						lineStyle: {
							color: '#EEF1F7',
						}
					},
				},
				series,
			}
			this.myChart.setOption(option)
		},
	},
};

</script>

<style lang="scss" scoped>
.ichart {
	width: 100%;
	height: 100%;

}
</style>
